<template>
  <div class="airticket">
    <div class="main_top">
      <!-- 第一个区域：旅游广告推送 -->
      <div class="main_top_01">
        <div class="main_top_01_lift">
          <div class="main_top_01_lift_box">
            <h3>热门推荐</h3>
          </div>
          <ul>
            <li v-for="item in mainlist" :key="item.id">
              <div>
                <h4>{{ item.country }}</h4>
              </div>
              <div class="lift_box">
                <a href="http://www.wuyanjun.cn/#/error" v-for="(city, index) in item.city" :key="index">{{ city }}</a>
              </div>
            </li>

          </ul>
        </div>
        <div class="main_top_01_right">
          <div class="top_01_right_01">
            <el-carousel height="620px">
              <el-carousel-item v-for="item in bannerlist" :key="item.id">
                <img :src="`http://101.42.51.171:9000/smart/image/${item.img_url}`" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="top_01_right_02">
            <div><img src="http://101.42.51.171:9000/smart/image/button_01.png"></div>
            <div><img src="http://101.42.51.171:9000/smart/image/button_02.png"></div>
            <div><img src="http://101.42.51.171:9000/smart/image/button_03.png"></div>
          </div>
        </div>
      </div>

      <!-- 第二个区域：旅游推荐 -->
      <div>
        <div class="contentBox">
          <!-- 居中盒 -->
          <div class="container">
            <!-- 第一个热门区域 -->
            <div class="hotBox">
              <!-- 热门导航条 -->
              <div class="hotNavBox">
                <ul>
                  <li id="active">
                    <a href="http://www.wuyanjun.cn/#/error">
                      热门
                      
                      <img v-lazy="`http://101.42.51.171:9000/smart/image/top3.png`" alt="" class="top">
                    </a>
                  </li>

                  <li class="rePosition">
                    <a href="http://www.wuyanjun.cn/#/error">
                      特价旅游
                      <img v-lazy="`http://101.42.51.171:9000/smart/image/hot.png`" alt="" class="hot">
                    </a>
                  </li>

                  <li><a href="#">出境游</a></li>

                  <li class="rePosition">
                    <a href="http://www.wuyanjun.cn/#/error">
                      当地玩乐
                      <img v-lazy="`http://101.42.51.171:9000/smart/image/new.png`" alt="" class="new">
                    </a>
                  </li>

                  <li><a href="http://www.wuyanjun.cn/#/error">境内游</a></li>

                  <li><a href="http://www.wuyanjun.cn/#/error">境内游</a></li>

                </ul>
                <div class="rightOut">
                  {{ city }}出发
                  <img v-lazy="`http://101.42.51.171:9000/smart/image/bottom3.png`" alt="">
                </div>
              </div>
              <!-- 热门的内容区 -->
              <div class="hotContentBox">
                <!-- 精选列表 -->
                <div class="navListBox">
                  <ul>
                    <li id="active"><a href="http://www.wuyanjun.cn/#/error">精选</a></li>
                    <li><a href="http://www.wuyanjun.cn/#/error">境内</a></li>
                    <li><a href="http://www.wuyanjun.cn/#/error">港澳台</a></li>
                  </ul>
                </div>
                <!-- 内容区 -->
                <div class="picContentBox">
                  <!-- 左侧图片盒子 -->
                  <div class="picLeft  width910">

                    <!-- 单个盒子开始 -->
                    <div class="imgBox rePosition img01">
                      <a href="http://www.wuyanjun.cn/#/error">
                        <!-- 左上角的销售数量 -->
                        <div class="topSaleBox abPosition">
                          月销74200笔
                        </div>
                        <div class="picIntroduceBox abPosition picIntroduceBox_01">
                          <p>北京</p>
                          <span class="moneyIcon">￥</span>
                          <span class="price">1572</span>
                          <span class="perUp">1/人起</span>
                        </div>
                      </a>
                    </div>

                    <!-- 当个盒子结束 -->
                    <div class="imgBox rePosition img02">
                      <a href="http://www.wuyanjun.cn/#/error">
                        <!-- 左上角的销售数量 -->
                        <div class="topSaleBox abPosition">
                          月销26200笔
                        </div>
                        <div class="picIntroduceBox abPosition">
                          <p>苏州</p>
                          <span class="moneyIcon">￥</span>
                          <span class="price">572</span>
                          <span class="perUp">/人起</span>
                        </div>
                      </a>
                    </div>

                    <div class="imgBox rePosition img03">
                      <a href="http://www.wuyanjun.cn/#/error">
                        <!-- 左上角的销售数量 -->
                        <div class="topSaleBox abPosition">
                          月销7400笔
                        </div>
                        <div class="picIntroduceBox abPosition">
                          <p>上海</p>
                          <span class="moneyIcon">￥</span>
                          <span class="price">2502</span>
                          <span class="perUp">/人起</span>
                        </div>
                      </a>
                    </div>

                    <div class="imgBox rePosition img04">
                      <a href="http://www.wuyanjun.cn/#/error">
                        <!-- 左上角的销售数量 -->
                        <div class="topSaleBox abPosition">
                          月销1200笔
                        </div>
                        <div class="picIntroduceBox abPosition">
                          <p>武汉</p>
                          <span class="moneyIcon">￥</span>
                          <span class="price">1072</span>
                          <span class="perUp">/人起</span>
                        </div>
                      </a>
                    </div>

                    <div class="imgBox rePosition img05">
                      <a href="http://www.wuyanjun.cn/#/error">
                        <!-- 左上角的销售数量 -->
                        <div class="topSaleBox abPosition">
                          月销7410笔
                        </div>
                        <div class="picIntroduceBox abPosition">
                          <p>三亚</p>
                          <span class="moneyIcon">￥</span>
                          <span class="price">3572</span>
                          <span class="perUp">/人起</span>
                        </div>
                      </a>
                    </div>

                    <div class="imgBox rePosition img06">
                      <a href="http://www.wuyanjun.cn/#/error">
                        <!-- 左上角的销售数量 -->
                        <div class="topSaleBox abPosition">
                          月销220笔
                        </div>
                        <div class="picIntroduceBox abPosition">
                          <p>德国</p>
                          <span class="moneyIcon">￥</span>
                          <span class="price">5572</span>
                          <span class="perUp">/人起</span>
                        </div>
                      </a>
                    </div>

                    <div class="imgBox rePosition img07">
                      <a href="http://www.wuyanjun.cn/#/error">
                        <!-- 左上角的销售数量 -->
                        <div class="topSaleBox abPosition">
                          月销6400笔
                        </div>
                        <div class="picIntroduceBox abPosition">
                          <p>威海</p>
                          <span class="moneyIcon">￥</span>
                          <span class="price">1070</span>
                          <span class="perUp">/人起</span>
                        </div>
                      </a>
                    </div>

                    <div class="imgBox rePosition img08">
                      <a href="http://www.wuyanjun.cn/#/error">
                        <!-- 左上角的销售数量 -->
                        <div class="topSaleBox abPosition">
                          月销7920笔
                        </div>
                        <div class="picIntroduceBox abPosition">
                          <p>杭州</p>
                          <span class="moneyIcon">￥</span>
                          <span class="price">2572</span>
                          <span class="perUp">/人起</span>
                        </div>
                      </a>
                    </div>

                  </div>
                  <!-- 右侧图片盒子 -->
                  <div class="picRight">
                    <img v-lazy="`http://101.42.51.171:9000/smart/image/pic.9.jpg`" alt="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- 第三个区域：境外租车 -->
      <div class="hotBox" style="width: 1180px;margin-left: 25px;height: auto;">
        <!-- 热门导航条 -->
        <div class="hotNavBox">
          <ul>
            <li id="active">
              <a href="http://www.wuyanjun.cn/#/error">
                海外租车
                <img v-lazy="`http://101.42.51.171:9000/smart/image/top3.png`" alt="" class="top">
              </a>
            </li>
            <li class="rePosition">
              <a href="http://www.wuyanjun.cn/#/error">
                境外接送机
              </a>
            </li>
            <li><a href="http://www.wuyanjun.cn/#/error">国内租车</a></li>
          </ul>
        </div>
        <!-- 热门的内容区 -->
        <div class="carContentBox">
          <!-- 内容区 -->
          <div class="picContentBox">
            <!-- 左侧热门城市列表 -->
            <div class="hotCity">
              <h4>热门城市</h4>
              <ul>
                <li class="rePosition">
                  <a href="http://www.wuyanjun.cn/#/error">
                    北京
                    <img v-lazy="`http://101.42.51.171:9000/smart/image/H.png`" alt="" class="abPosition">
                  </a>
                </li>
                <li class="rePosition">
                  <a href="http://www.wuyanjun.cn/#/error">
                    上海
                    <img v-lazy="`http://101.42.51.171:9000/smart/image/H.png`" alt="" class="abPosition">
                  </a>
                </li>
                <li><a href="http://www.wuyanjun.cn/#/error">伦敦</a></li>
                <li><a href="http://www.wuyanjun.cn/#/error">纽约</a></li>
                <li><a href="http://www.wuyanjun.cn/#/error">太原</a></li>
                <li><a href="http://www.wuyanjun.cn/#/error">洛杉矶</a></li>
                <li><a href="http://www.wuyanjun.cn/#/error">南京</a></li>
                <li><a href="http://www.wuyanjun.cn/#/error">旧金山</a></li>
                <li><a href="http://www.wuyanjun.cn/#/error">杭州</a></li>
                <li><a href="http://www.wuyanjun.cn/#/error">柏林</a></li>
                <li><a href="http://www.wuyanjun.cn/#/error">芝加哥</a></li>
              </ul>
            </div>
            <!-- 右侧的图片区域 -->
            <div class="rightBox">
              <!-- 精选列表 -->
              <div class="navListBox top10 bottom10 navListBox02">
                <ul>
                  <li id="active"><a href="http://www.wuyanjun.cn/#/error">小型轿车</a></li>
                  <li><a href="http://www.wuyanjun.cn/#/error">SUV</a></li>
                  <li><a href="http://www.wuyanjun.cn/#/error">豪华轿车</a></li>
                  <li><a href="http://www.wuyanjun.cn/#/error">越野车</a></li>
                </ul>
              </div>
              <!-- 左侧图片盒子 -->
              <div class="picLeft">
                <!-- 单个盒子开始 -->
                <div class="carBox rePosition">
                  <img v-lazy="`http://101.42.51.171:9000/smart/image/car1.png`" alt="">
                  <p class="carTitle">美国 洛杉矶</p>
                  <p class="carIntro">自驾梦幻1号公路</p>
                  <!-- 右侧价格 -->
                  <div class="rightMoney abPosition">
                    <span class="moneyIcon">￥</span>
                    <span class="price">157</span>
                    <span class="perUp">起</span>
                  </div>
                </div>
                <!-- 单个盒子结束 -->
                <div class="carBox rePosition">
                  <img v-lazy="`http://101.42.51.171:9000/smart/image/car2.png`" alt="">
                  <p class="carTitle">美国 洛杉矶</p>
                  <p class="carIntro">自驾梦幻1号公路</p>
                  <!-- 右侧价格 -->
                  <div class="rightMoney abPosition">
                    <span class="moneyIcon">￥</span>
                    <span class="price">157</span>
                    <span class="perUp">起</span>
                  </div>
                </div>
                <div class="carBox rePosition">
                  <img v-lazy="`http://101.42.51.171:9000/smart/image/car3.png`" alt="">
                  <p class="carTitle">美国 洛杉矶</p>
                  <p class="carIntro">自驾梦幻1号公路</p>
                  <!-- 右侧价格 -->
                  <div class="rightMoney abPosition">
                    <span class="moneyIcon">￥</span>
                    <span class="price">157</span>
                    <span class="perUp">起</span>
                  </div>
                </div>
                <div class="carBox rePosition">
                  <img v-lazy="`http://101.42.51.171:9000/smart/image/car4.png`" alt="">
                  <p class="carTitle">美国 洛杉矶</p>
                  <p class="carIntro">自驾梦幻1号公路</p>
                  <!-- 右侧价格 -->
                  <div class="rightMoney abPosition">
                    <span class="moneyIcon">￥</span>
                    <span class="price">157</span>
                    <span class="perUp">起</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- 第四个区域：目的地攻略 -->
      <div class="hotBox" style="width: 1180px;margin-left: 25px;height: auto;">
        <!-- 热门导航条 -->
        <div class="hotNavBox">
          <ul>
            <li id="active">
              <a href="http://www.wuyanjun.cn/#/error">
                目的地攻略
                <img v-lazy="`http://101.42.51.171:9000/smart/image/top3.png`" alt="" class="top">
              </a>
            </li>
            <li class="rePosition">
              <a href="http://www.wuyanjun.cn/#/error">
                旅游旗舰店
              </a>
            </li>
          </ul>
        </div>
        <!-- 热门的内容区 -->
        <div class="hotContentBox carContentBox">
          <!-- 内容区 -->
          <div class="picContentBox">
            <!-- 左侧新闻列表 -->
            <div class="newsBox">
              <h4>当季推荐：</h4>
              <ul>
                <li><a href="https://you.ctrip.com/travels/Chengdu104/3966516.html">人间烟火，理想生活 | 2020成都最新版游记</a></li>
                <li><a href="https://you.ctrip.com/travels/Guangzhou152/3963984.html">湾区超美风景线，一起感受至美南沙</a></li>
                <li><a href="https://you.ctrip.com/travels/Chongqing158/3996771.html">重庆森林，一部现实与梦境交织的电影</a></li>
                <li><a href="https://you.ctrip.com/travels/DaliPrefecture31/3997356.html">雨季的大理，没有风花雪月，却依旧惊艳了时光</a></li>
                <li><a href="https://you.ctrip.com/travels/Sanya61/3996967.html">三亚小众玩法 | 春天刚来，我便开始想念海边的漫时光</a></li>
                <li><a href="https://you.ctrip.com/travels/Hulunbuir458/3959636.html">这辈子值得你一定要去的呼伦贝尔大草原</a></li>
                <li><a href="https://you.ctrip.com/travels/Shanghai2/3996270.html">疫情期间，足不出沪，穿越时间和空间去旅行~</a></li>
              </ul>
            </div>
            <!-- 右侧的图片区域 -->
            <div class="rightBox01">
              <!-- 精选列表 -->
              <div class="navListBox03 bottom10 navListBox">
                <ul>
                  <li id="active"><a href="http://www.wuyanjun.cn/#/error">三亚专栏</a></li>
                  <li><a href="http://www.wuyanjun.cn/#/error">旅行正当时</a></li>
                  <li><a href="http://www.wuyanjun.cn/#/error">此生必去城市</a></li>
                  <li><a href="http://www.wuyanjun.cn/#/error">环球旅游</a></li>
                </ul>
              </div>
              <!-- 左侧图片盒子 -->
              <div class="picLeft" id="picLeft02">
                <!-- 单个盒子开始 -->
                <div class="imgBox rePosition">
                  <a href="#">
                    <img v-lazy="`http://101.42.51.171:9000/smart/image/div10.1.jpg`" alt="">
                    <div class="imgIntroduce abPosition">
                      亚龙湾
                    </div>
                  </a>
                </div>
                <!-- 当个盒子结束 -->
                <div class="imgBox rePosition">
                  <a href="#">
                    <img v-lazy="`http://101.42.51.171:9000/smart/image/div10.2.jpg`" alt="">
                    <div class="imgIntroduce abPosition">
                      蜈支洲岛
                    </div>
                  </a>
                </div>
                <div class="imgBox rePosition">
                  <a href="#">
                    <img v-lazy="`http://101.42.51.171:9000/smart/image/div10.3.jpg`" alt="">
                    <div class="imgIntroduce abPosition">
                      大东海
                    </div>
                  </a>
                </div>
                <div class="imgBox rePosition">
                  <a href="#">
                    <img v-lazy="`http://101.42.51.171:9000/smart/image/div10.4.jpg`" alt="">
                    <div class="imgIntroduce abPosition">
                      西岛
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <foot />
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref,getCurrentInstance } from 'vue';


let city = ref('山西')
let bannerlist = ref([
  { id: 1, img_url: 'right-01.jpg' },
  { id: 2, img_url: 'right-02.jpg' },
])
let mainlist = ref([
  { id: 1, country: "德国", city: ["柏林", "汉堡", "慕尼黑 "] },
  { id: 2, country: "英国", city: ["伦敦 ", "伯明翰", "利兹  "] },
  { id: 3, country: "北京", city: ["故宫", "八达岭长城", "天安门 "] },
  { id: 4, country: "苏州", city: ["苏州园林", "太湖", "寒山寺 "] },
  { id: 5, country: "上海", city: ["迪士尼", "东方明珠", "杭州 "] },
  { id: 6, country: "美国", city: ["纽约", "洛杉矶", "芝加哥 "] },
  { id: 7, country: "山西", city: ["太原", "大同", "运城 "] },
  { id: 8, country: "南京", city: ["中山陵", "总统府", "夫子庙 "] },
])
</script>

<style lang='scss'>
//第一个推荐栏的8个盒子图片
.img01 {
  background-image: url("http://101.42.51.171:9000/smart/image/pic.1.jpg");
}

.img02 {
  background-image: url("http://101.42.51.171:9000/smart/image/pic.2.jpg");
}

.img03 {
  background-image: url("http://101.42.51.171:9000/smart/image/pic.3.jpg");
}

.img04 {
  background-image: url("http://101.42.51.171:9000/smart/image/pic.4.jpg");
}

.img05 {
  background-image: url("http://101.42.51.171:9000/smart/image/pic.5.jpg");
}

.img06 {
  background-image: url("http://101.42.51.171:9000/smart/image/pic.6.jpg");
}

.img07 {
  background-image: url("http://101.42.51.171:9000/smart/image/pic.7.jpg");
}

.img08 {
  background-image: url("http://101.42.51.171:9000/smart/image/pic.8.jpg");
}

.main_top {
  display: block;
  width: 100%;
  height: auto;
}

.main_top_01 {
  display: flex;
  margin-left: 35px;
}

.main_top_01_lift {
  display: block;
  width: 268px;
  height: 548px;
  margin-right: 20px;
  border: 3px solid rgba(0, 0, 0, .2);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
  ;
}

.main_top_01_lift_box {
  padding-left: 15px;
  padding-top: 11px;
  padding-bottom: 20px;
}

.lift_box {
  margin-left: -20px;
}

.lift_box a {
  font-size: 14px;
  font-weight: 500;
  padding-right: 10px;
  color: #333333;
}

.lift_box a:hover {
  color: var(--el-color-primary);
}

.main_top_01_lift li {
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  border-top: 1px solid rgba(0, 0, 0, .2);
  text-align: justify;
  padding-left: 40px;
  padding-top: 5px
}

.main_top_01_right {
  width: 900px;
  height: 548px;
  display: block;
}

.top_01_right_01 {
  height: 400px;
  width: 100%;
  margin-bottom: 10px;
}

.top_01_right_02 {
  display: flex;
}

.top_01_right_02 div {
  width: 293px;
  height: 140px;
  margin-right: 20px
}

/*banner位的样式编写*/
.contentBox {
  width: 100%;
  /*为了解决浮动导致它的高度为0的情况*/
  overflow: hidden;
  background: #fff;
}

.container {
  width: 1180px;
  /*为了解决浮动导致它的高度为0的情况*/
  overflow: hidden;
  /*中间盒子居中*/
  margin: 0 auto;
  padding-bottom: 30px;
}

/*第二个热门区域的样式编写*/
.hotBox .hotNavBox {
  border-bottom: 2px solid #0066CC;
  height: 36px;
  line-height: 36px;
  margin-top: 30px;
  padding-left: 20px
}

.hotBox .hotNavBox #active {
  /*相对定位*/
  position: relative;
}

.hotBox .hotNavBox ul li {
  /*浮动*/
  float: left;
  margin-right: 30px;
}

.hotBox .hotNavBox ul li a {
  font-size: 16px;
  color: #333333;
  display: block;
  width: 120px;

}

.hotBox .hotNavBox ul li a:hover,
.hotBox .hotNavBox #active a {
  color: #0066CC;
}

/*热门区域导航条右侧的样式处理*/
.hotBox .hotNavBox .rightOut {
  color: black;
  font-size: 20px;
  float: right;
}

.hotBox .hotNavBox .rightOut img {
  width: 10px;
  height: 7px;
}

.hotBox .hotNavBox ul li .top {
  width: 12px;
  height: 12px;
  /*绝对定位*/
  position: absolute;
  top: 27px;
  left: 10px;
}

.hotBox .hotNavBox ul li .new {
  width: 30px;
  height: 15px;
  /*绝对定位*/
  position: relative;
  top: -15px;
  right: 30px;
}


/*热门的外内容区盒子*/
.hotContentBox {
  padding: 15px;
  border: 1px solid #DDDDDD;
  background: #fff;
}

/*下面的一个精选导航列表*/
.navListBox {
  overflow: hidden;
  margin-top: -5px;
}

.navListBox02 {
  margin-top: 0px;
  padding-top: 2px;
  padding-bottom: 3px;
}

.navListBox03 {
  overflow: hidden;
  margin-top: 5px;
  padding-bottom: 10px;
}

.navListBox .rightLink {
  float: right;
  margin-right: 15px;
  color: #3983E5;
  padding: 5px 10px;
  border: 1px solid #fff;
  border-radius: 3px;
}

.navListBox .rightLink:hover {
  border: 1px solid #3983E5;
}

.navListBox ul li {
  padding: 2px 6px;
  margin-right: 25px;
  float: left;
  line-height: 16px;
}

.navListBox ul li a {
  color: #3983E5;
  font-size: 15px;
}

.navListBox #active,
.navListBox ul li:hover {
  background: #3983E5;
  border-radius: 3px;
}

.navListBox #active a,
.navListBox ul li:hover a {
  color: #fff;
}

/*热门的图片区域样式*/
.picContentBox {
  /*解决浮动问题*/
  overflow: hidden;
  margin-top: 10px;
  display: flex;
}

.picContentBox .picLeft {
  height: 330px;
  /*左边盒子靠左*/
  float: left;
  width: 910px;
  margin-right: 17px;
}

a {
  color: #666;
  font-size: 12px;
  text-decoration: none;
}

.picContentBox .picLeft .imgBox {
  width: 200px;
  height: 160px;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

/*解决第4个第8个的右边距超宽掉下来的问题*/
.picContentBox .picLeft .imgBox:nth-child(4),
.picContentBox .picLeft .imgBox:nth-child(8) {
  margin-right: 0;
}

.picContentBox .picLeft .imgBox img {
  width: 220px;
  height: 160px;
}

/*月售多少笔*/
.picLeft .imgBox .topSaleBox {
  width: 88px;
  height: 20px;
  background: #FF6913;
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  border-radius: 0 0 10px 0;
  top: 0;
  left: 0;
}

.picLeft .imgBox .picIntroduceBox {
  width: 112px;
  height: 112px;
  background: rgb(0, 0, 0, 0.5);
  color: #fff;
  /*让盒子定位到中心的方法*/
  margin-left: 49px;
  margin-top: -25px;
  /*让它变圆形*/
  border-radius: 50%;
  font-size: 14px;
  z-index: 100;
}

.picIntroduceBox p {
  text-align: center;
  /*margin-top:;*/
  font-size: 18px;
  width: 106px;
  margin: 0 auto;
  margin-top: 34px;
  border-bottom: 1px solid #959599;
  padding-top: 20px;
  margin-bottom: 10px;
}

.moneyIcon {
  font-size: 20px;
  position: relative;
  top: -8px;
  left: 5px;
}

.price {
  font-size: 22px;
  color: #FF6600;
  margin-left: 0;
}

.perUp {
  font-size: 12px;
}

/*图片的右侧盒子*/
.picContentBox .picRight {
  width: 220px;
  height: 330px;
  float: right;
}

.hotBox .hotNavBox ul li .hot {
  width: 40px;
  height: 15px;
  position: relative;
  top: -15px;
  right: 30px;
}

/*第三个区域：海外租车*/
.carContentBox {
  border: 1px solid #DDDDDD;
  background: #fff;
}

.carContentBox .picContentBox {
  margin-top: 0;
}

/*解决前面的样式影响*/
.carContentBox .picContentBox .picLeft {
  height: auto;
  margin-left: 30px;
}

#picLeft02 {
  width: 830px;
  height: auto;
  margin-left: 30px;
}

.hotCity {
  width: 224px;
  height: 250px;
  padding: 15px;
  float: left;
  border-right: 1px dashed #ccc;
  margin-right: 10px;
}

.hotCity ul li {
  padding: 0 10px;
  margin-top: 14px;
  float: left;
  /*右侧的边线*/
  border-right: 1px solid #eee;
  text-align: center;
  line-height: 21px;
}

.hotCity ul li img {
  width: 10px;
  height: 10px;
  right: 8px;
  top: -3px;
}

/*右侧的租车列表*/
.carBox {
  width: 220px;
  height: 226px;
  font-size: 12px;
  float: left;
  margin-right: 4px;
}

.carBox img {
  width: 220px;
  height: 146px;
}

.carTitle {
  color: #666;
  padding: 0 5px;
  /*处理文字超出换行的问题，显示...*/
  white-space: nowrap;
  /*多出的文字显示...*/
  text-overflow: ellipsis;
  /*超宽隐藏*/
  overflow: hidden;
}

.carIntro {
  color: #999;
  padding: 0 5px;
  margin-top: 10px;
}

.carBox:hover {
  box-shadow: 1px 1px 5px #ccc;
}

.rightMoney {
  position: relative;
  left: 130px;
  top: 1px;
}

/*旅游目的地的样式*/
.carContentBox .imgBox {
  overflow: hidden;
}

.carContentBox .imgBox:hover img {
  transform: scale(1.2);
  z-index: 0;
}

.carContentBox .imgBox .imgIntroduce {
  width: 220px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  line-height: 30px;
  position: relative;
  margin-top: -36px;
}

.newsBox li :hover {
  color: var(--el-color-primary);
}


.picContentBox .newsBox {
  width: 300px;
  float: left;
  border-right: 1px dashed #ccc;
  margin-right: 10px;
}
</style>